﻿<!DOCTYPE html>
<html>
  <head>
    <title>产品页面设计说明</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/产品页面设计说明/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/产品页面设计说明/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u0" class="ax_default label">
        <div id="u0_div" class=""></div>
        <div id="u0_text" class="text ">
          <p><span>【首页】</span></p><p><span>搜索：自定义搜索、热门搜索、历史搜索</span></p><p><span>推荐：美妆、美食、家居、健康、母婴</span></p><p><span>美妆馆：妆前隔离、面部防晒、防霾口罩、全部分类、保湿面膜、洗发护发、今日上新、爱美大赏</span></p><p><span>时尚馆美食馆：饼干糕点、量贩区、方便面、咖啡、巧克力、全部美食、新品速递、热卖好味</span></p><p><span>健康馆：美容养颜、酵素、维生素、清肺止咳、祛寒止痛、眼药水、本周上新</span></p><p><span>二维码：用户可通过扫描商品二维码进行商品的检索</span></p><p><span>信息：用户可接收客服信息和联系客服，还可收到APP平台发的广告信息</span></p><p><span>推荐商品列表：每隔一小时，更新一批商品</span></p><p><span><br></span></p><p><span>【分类品牌】</span></p><p><span>美丽精选：护肤美妆、家居生活</span></p><p><span>家居用品：生活日用、数码电器</span></p><p><span>中古奢品：中古箱包服饰、中古服饰鞋履</span></p><p><span>母婴儿童：宝宝洗护、孕产母乳</span></p><p><span>时尚服饰：服饰内衣、鞋</span></p><p><span><br></span></p><p><span>【美丽说】</span></p><p><span>搜索：用户可自行编辑关键词进行检索</span></p><p><span>新增文章：用户可以编辑自己的美丽说</span></p><p><span>美丽说列表：用户可以查看别人写的美丽说</span></p><p><span>点赞：用户可以对美丽说列表中的文章一键点赞</span></p><p><span><br></span></p><p><span>【购物袋】</span></p><p><span>编辑：用户可自行删减商品</span></p><p><span>购物袋列表勾选：用户可勾选自己真正要买的东西下单</span></p><p><span>全选：一键全选所有商品</span></p><p><span>结算：点击跳转至结算页面</span></p><p><span><br></span></p><p><span>【我的】</span></p><p><span>登录：用户可用手机号或者微信一键登录</span></p><p><span>积分：点击可查询本账户的积分余额</span></p><p><span>优惠券：点击进入优惠券列表</span></p><p><span>美丽说：点击进入本用户美丽说主页</span></p><p><span>我的订单:待付款、待发货、待收货、待评价、全部订单</span></p><p><span>我的服务:收藏夹、积分商城、我的特权、我的点评、邀请好友、联系客服、关注服务号、评价我们</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1" class="ax_default label">
        <div id="u1_div" class=""></div>
        <div id="u1_text" class="text ">
          <p><span>首页、分类品牌、美丽说、购物袋、我的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2" class="ax_default _一级标题">
        <div id="u2_div" class=""></div>
        <div id="u2_text" class="text ">
          <p><span>二、首屏页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u3" class="ax_default _二级标题">
        <div id="u3_div" class=""></div>
        <div id="u3_text" class="text ">
          <p><span>一级页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u4" class="ax_default _二级标题">
        <div id="u4_div" class=""></div>
        <div id="u4_text" class="text ">
          <p><span>二级页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u5" class="ax_default _一级标题">
        <div id="u5_div" class=""></div>
        <div id="u5_text" class="text ">
          <p><span>一、大框架页面搭建</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u6" class="ax_default _二级标题">
        <div id="u6_div" class=""></div>
        <div id="u6_text" class="text ">
          <p><span>首屏展示信息：</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u7" class="ax_default label">
        <div id="u7_div" class=""></div>
        <div id="u7_text" class="text ">
          <p><span>1、二维码</span></p><p><span>2、搜索框</span></p><p><span>3、信息</span></p><p><span>4、推荐</span></p><p><span>5、美妆馆</span></p><p><span>6、时尚馆</span></p><p><span>7、美食馆</span></p><p><span>8、健康馆</span></p><p><span>9、广告轮播图</span></p><p><span>10、质量保证说明</span></p><p><span>11、美妆个护</span></p><p><span>12、美食饮料</span></p><p><span>13、家居生活</span></p><p><span>14、营养健康</span></p><p><span>15、母婴儿童</span></p><p><span>16、团购</span></p><p><span>17、小分类图片</span></p><p><span>18、团购广告图</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u8" class="ax_default _二级标题">
        <div id="u8_div" class=""></div>
        <div id="u8_text" class="text ">
          <p><span>十字法</span></p>
        </div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u9" class="ax_default arrow">
        <img id="u9_img" class="img " src="images/产品页面设计说明/u9.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u10" class="ax_default arrow">
        <img id="u10_img" class="img " src="images/产品页面设计说明/u10.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u11" class="ax_default _三级标题">
        <div id="u11_div" class=""></div>
        <div id="u11_text" class="text ">
          <p><span>重要必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u12" class="ax_default label">
        <div id="u12_div" class=""></div>
        <div id="u12_text" class="text ">
          <p><span>1、搜索框</span></p><p><span>2、美妆馆</span></p><p><span>3、时尚馆</span></p><p><span>4、推荐</span></p><p><span>5、健康馆</span></p><p><span>6、美食馆</span></p><p><span>7、信息</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u13" class="ax_default _三级标题">
        <div id="u13_div" class=""></div>
        <div id="u13_text" class="text ">
          <p><span>重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u14" class="ax_default label">
        <div id="u14_div" class=""></div>
        <div id="u14_text" class="text ">
          <p><span>1、团购</span></p><p><span>2、美妆个护</span></p><p><span>3、美食饮料</span></p><p><span>4、家居生活</span></p><p><span>5、营养健康</span></p><p><span>6、母婴儿童</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u15" class="ax_default _三级标题">
        <div id="u15_div" class=""></div>
        <div id="u15_text" class="text ">
          <p><span>必须不重要的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u16" class="ax_default label">
        <div id="u16_div" class=""></div>
        <div id="u16_text" class="text ">
          <p><span>1、广告轮播图</span></p><p><span>2、小分类图片</span></p><p><span>3、团购广告图</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u17" class="ax_default _三级标题">
        <div id="u17_div" class=""></div>
        <div id="u17_text" class="text ">
          <p><span>不重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u18" class="ax_default label">
        <div id="u18_div" class=""></div>
        <div id="u18_text" class="text ">
          <p><span>1、二维码</span></p><p><span>2、质量保证说明</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u19" class="ax_default _一级标题">
        <div id="u19_div" class=""></div>
        <div id="u19_text" class="text ">
          <p><span>三、版式布局设计安排原因</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u20" class="ax_default _三级标题">
        <div id="u20_div" class=""></div>
        <div id="u20_text" class="text ">
          <p><span>首先从产品需求去分析</span></p>
        </div>
      </div>

      <!-- Unnamed (组合) -->
      <div id="u21" class="ax_default" data-left="408" data-top="1998" data-width="304" data-height="607">

        <!-- Unnamed (图片) -->
        <div id="u22" class="ax_default image">
          <img id="u22_img" class="img " src="images/产品页面设计说明/u22.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u23" class="ax_default image">
          <img id="u23_img" class="img " src="images/产品页面设计说明/u23.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u24" class="ax_default image">
          <img id="u24_img" class="img " src="images/产品页面设计说明/u24.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u25" class="ax_default image">
          <img id="u25_img" class="img " src="images/产品页面设计说明/u25.png"/>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u26" class="ax_default box_1">
        <div id="u26_div" class=""></div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u27" class="ax_default line">
        <img id="u27_img" class="img " src="images/产品页面设计说明/u27.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u28" class="ax_default box_1">
        <img id="u28_img" class="img " src="images/产品页面设计说明/u28.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u29" class="ax_default icon">
        <img id="u29_img" class="img " src="images/产品页面设计说明/u29.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u30" class="ax_default box_1">
        <img id="u30_img" class="img " src="images/产品页面设计说明/u30.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u31" class="ax_default box_1">
        <img id="u31_img" class="img " src="images/产品页面设计说明/u31.png"/>
        <div id="u31_text" class="text ">
          <p><span>粉底液</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u32" class="ax_default icon">
        <img id="u32_img" class="img " src="images/产品页面设计说明/u32.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u33" class="ax_default label">
        <div id="u33_div" class=""></div>
        <div id="u33_text" class="text ">
          <p><span>全部</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u34" class="ax_default label">
        <div id="u34_div" class=""></div>
        <div id="u34_text" class="text ">
          <p><span>美丽说</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u35" class="ax_default label">
        <div id="u35_div" class=""></div>
        <div id="u35_text" class="text ">
          <p><span>视频</span></p>
        </div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u36" class="ax_default line">
        <img id="u36_img" class="img " src="images/产品页面设计说明/u36.png"/>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u37" class="ax_default line">
        <img id="u37_img" class="img " src="images/产品页面设计说明/u37.png"/>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u38" class="ax_default line">
        <img id="u38_img" class="img " src="images/产品页面设计说明/u38.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u39" class="ax_default label">
        <div id="u39_div" class=""></div>
        <div id="u39_text" class="text ">
          <p><span>推荐</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u40" class="ax_default label">
        <div id="u40_div" class=""></div>
        <div id="u40_text" class="text ">
          <p><span>销量</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u41" class="ax_default label">
        <div id="u41_div" class=""></div>
        <div id="u41_text" class="text ">
          <p><span>新品</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u42" class="ax_default label">
        <div id="u42_div" class=""></div>
        <div id="u42_text" class="text ">
          <p><span>价格</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u43" class="ax_default icon">
        <img id="u43_img" class="img " src="images/产品页面设计说明/u43.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u44" class="ax_default icon">
        <img id="u44_img" class="img " src="images/产品页面设计说明/u44.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u45" class="ax_default box_1">
        <div id="u45_div" class=""></div>
        <div id="u45_text" class="text ">
          <p><span>活动</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u46" class="ax_default box_1">
        <img id="u46_img" class="img " src="images/产品页面设计说明/u46.png"/>
        <div id="u46_text" class="text ">
          <p><span>自营</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u47" class="ax_default box_1">
        <img id="u47_img" class="img " src="images/产品页面设计说明/u47.png"/>
        <div id="u47_text" class="text ">
          <p><span>品牌直供</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u48" class="ax_default box_1">
        <img id="u48_img" class="img " src="images/产品页面设计说明/u48.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u49" class="ax_default box_1">
        <img id="u49_img" class="img " src="images/产品页面设计说明/u49.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u50" class="ax_default image">
        <img id="u50_img" class="img " src="images/产品页面设计说明/u50.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u51" class="ax_default label">
        <div id="u51_div" class=""></div>
        <div id="u51_text" class="text ">
          <p><span>MACCHIA LABEL 净白肌肤粉底液</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u52" class="ax_default label">
        <div id="u52_div" class=""></div>
        <div id="u52_text" class="text ">
          <p><span>￥142</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u53" class="ax_default box_1">
        <img id="u53_img" class="img " src="images/产品页面设计说明/u49.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u54" class="ax_default image">
        <img id="u54_img" class="img " src="images/产品页面设计说明/u54.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u55" class="ax_default label">
        <div id="u55_div" class=""></div>
        <div id="u55_text" class="text ">
          <p><span>COVERMARK 中草药修护粉底霜</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u56" class="ax_default label">
        <div id="u56_div" class=""></div>
        <div id="u56_text" class="text ">
          <p><span>￥432</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u57" class="ax_default box_1">
        <img id="u57_img" class="img " src="images/产品页面设计说明/u49.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u58" class="ax_default box_1">
        <img id="u58_img" class="img " src="images/产品页面设计说明/u49.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u59" class="ax_default image">
        <img id="u59_img" class="img " src="images/产品页面设计说明/u59.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u60" class="ax_default image">
        <img id="u60_img" class="img " src="images/产品页面设计说明/u60.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u61" class="ax_default label">
        <div id="u61_div" class=""></div>
        <div id="u61_text" class="text ">
          <p><span>SHISEIDO 资生堂完美意境粉底液</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u62" class="ax_default label">
        <div id="u62_div" class=""></div>
        <div id="u62_text" class="text ">
          <p><span>￥99</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u63" class="ax_default label">
        <div id="u63_div" class=""></div>
        <div id="u63_text" class="text ">
          <p><span>KOHGEDO 江原道水漾美肌粉底液</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u64" class="ax_default label">
        <div id="u64_div" class=""></div>
        <div id="u64_text" class="text ">
          <p><span>￥271</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u65" class="ax_default icon">
        <img id="u65_img" class="img " src="images/产品页面设计说明/u65.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u66" class="ax_default icon">
        <img id="u66_img" class="img " src="images/产品页面设计说明/u65.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u67" class="ax_default icon">
        <img id="u67_img" class="img " src="images/产品页面设计说明/u65.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u68" class="ax_default icon">
        <img id="u68_img" class="img " src="images/产品页面设计说明/u65.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u69" class="ax_default label">
        <div id="u69_div" class=""></div>
        <div id="u69_text" class="text ">
          <p><span>随着现在产品种类和真实度越来越复杂，用户越来越追求产品是否有色差、质量是否过硬、长期使用的效果、是否有副作用等等。而原先的反应这些情况的功能——评论，也过于片面，所以本APP采用了商品列表、美丽说、视频这三个功能模块并列，当用户检索了一个关键词，只需要左右滑动就可以快速切换有关关键词的商品、美丽说和视频，可以让客户更加直观、真实、全面的了解产品，增强用户的使用感。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u70" class="ax_default _三级标题">
        <div id="u70_div" class=""></div>
        <div id="u70_text" class="text ">
          <p><span>再从版式去分析</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u71" class="ax_default label">
        <div id="u71_div" class=""></div>
        <div id="u71_text" class="text ">
          <p><span>本APP采用了卡片式的模块，方便用户区分每个商品。另外因为如今用户比起文字，更喜欢观看图片，所以版式采取了以图片为主，文字为辅的方式。价格也采取了标红、加粗，方便用户轻松购物。</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
